<template>
<!--  动态库存 -->
  <div id="dynamicInventory">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="仓库名">
        <el-input v-model="formInline.user" placeholder="请输入仓库名"></el-input>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input v-model="formInline.user" placeholder="请输入商品名称"></el-input>
      </el-form-item>
      <el-form-item label="供应商名称">
        <el-input v-model="formInline.user" placeholder="请输入供应商名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="DynamicsAry" style="width: 100%">
      <el-table-column prop="warehouseDetailsId" label="编号" width="180">
      </el-table-column>
      <el-table-column prop="imgLink" label="图片" width="180">
        <template slot-scope="scope">
          <el-avatar :size="45" shape="squear"  :src="scope.row.imgLink" @error="errorHandler">
            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
          </el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="商品名称">
      </el-table-column>
      <el-table-column prop="warehouseName" label="存放仓库">
      </el-table-column>
      <el-table-column prop="companyName" label="商品来源(供应商)">
      </el-table-column>
      <el-table-column prop="nowAmount" label="当前库存数量(件)">
      </el-table-column>
    </el-table>
    <!---分页组件-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizeList"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "DynamicInventory",
  data() {
    return{
      DynamicsAry:[],
      formInline: {
        user: '',
        region: ''
      },
      // 当前页号
      currentPage: 1,
      // 当前页大小
      pageSize: 5,
      // 总记录数
      total: 0,
      // 页大小列表
      pageSizeList: [2, 5, 10, 20]
    }
  },
  methods:{
    onSubmit() {
      console.log('submit!');
    },
    // 页大小改变
    handleSizeChange(val) {
      this.pageSize = val
      this.DynamicPage()
    },

    // 页号改变
    handleCurrentChange(val) {
      this.currentPage = val
      this.DynamicPage()
    },
    //分页查询动态库存数据
    async DynamicPage(){
      const {data: res} = await this.$http.post(`/warehouseDetails/DynamicListPage/
				${this.currentPage}/${this.pageSize}`, this.searchObj)
      console.log(res);
      this.DynamicsAry =res.list
      this.total =res.total
    },
    //头像展示失败
    errorHandler() {
      return true
    },
  },
  created() {
    this.DynamicPage()
  }
}
</script>

<style scoped>

</style>